<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>选项卡</title>
		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
		<style type="text/css">
			.tab1{
				border: 1px solid #ddd;
				border-top: none;
				padding: 100px;
				border-radius: 0 0 5px 5px;
			}
		</style>
	</head>
	<body>
		<!--
        	1、导航对应的所有内容需要放到一个class为tab-content的层里面
        	2、每一个内容块都需要加上一个名为tab-pane的class,并且给对应的默认显示的内容添加一个active的class
        	3、给每一个导航的a标签添加一个data-toggle="tab"的自定义属性
        	4、给每一个内容添加一个id
        	5、给每一个导航里的a标签添加一个锚点
        -->
		<div class="container">
			<div class="row">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#con04" data-toggle="tab">海淀</a></li>
					<li><a href="#con05" data-toggle="tab">朝阳</a></li>
					<li><a href="#con06" data-toggle="tab">通州</a></li>
				</ul>
				<div class="tab-content">
					<div id="con04" class="tab-pane active">中关村</div>
					<div id="con05" class="tab-pane">朝阳北路</div>
					<div id="con06" class="tab-pane">通州地铁</div>
				</div>
			</div>
		</div>
		<div class="container" style="margin-top: 30px;">
			<div class="row">
				<div class="col-lg-4">
					<ul class="nav nav-tabs">
					<li class="active"><a href="#con01" data-toggle="tab">海淀</a></li>
					<li><a href="#con02" data-toggle="tab">朝阳</a></li>
					<li><a href="#con03" data-toggle="tab">通州</a></li>
				</ul>
				<div class="tab-content tab1">
					<div id="con01" class="tab-pane active">中关村</div>
					<div id="con02" class="tab-pane">朝阳北路</div>
					<div id="con03" class="tab-pane">通州地铁</div>
				</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../../js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js" ></script>
	</body>
</html>
